<template>
  <div>
    <!--面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="5">
          <el-date-picker v-model="timegroup" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="gettimegroup" value-format="yyyy-MM-dd">
          </el-date-picker>

        </el-col>
        <el-col :span="8">
          <!-- 搜索区域 -->
          <el-input placeholder="请输入用户名或手机号" v-model="queryorder">
            <el-select v-model="queryInfo.status" slot="prepend" placeholder="请选择" @change="getValue">
              <el-option label="已删除" value=0></el-option>
              <el-option label="客户保存" value=1></el-option>
              <el-option label="客户确认" value=2></el-option>
              <el-option label="后台确认" value=3></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="getorderslist"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <!-- <el-button v-if="confirm==='2'" type="primary" @click="updateorderbutton" :disabled="extent">确认单据</el-button>
          <el-button v-if="confirm==='3'" type="warning" @click="updateorderbutton" :disabled="extent">反确认单据</el-button>
          <el-button type="success" class="export" @click="exportExcel">导出</el-button> -->
        </el-col>
      </el-row>
      <!-- 订单列表数据 -->
      <el-table :data="orderlist" style="width: 100%" border stripe ref="multipleTable" @select="selectorder" @select-all="selectorderall" @expand-change="expandchange" :row-key="getRowKeys" :expand-row-keys="expands" @row-click="clickTable" id="out-table">
        <el-table-column type="expand">
          <template slot-scope="scpoe">
            <el-table :data="scpoe.row.goodsList" style="width: 100%" show-summary>
              <el-table-column type="index" prop="prop" label="#" width="width"></el-table-column>
              <el-table-column prop="goodsId" label="款号" width="width"></el-table-column>
              <el-table-column prop="goodsName" label="商品名称" width="120px"></el-table-column>
              <el-table-column prop="categoryName" label="商品分类"></el-table-column>
              <el-table-column prop="styleSn" label="条码"></el-table-column>
              <el-table-column prop="goldWeight" label="金重"></el-table-column>
              <el-table-column prop="goldColor" label="金料成色"></el-table-column>
              <el-table-column prop="goldPrice" label="金价"></el-table-column>
              <el-table-column prop="mainStoneName" label="主石类别"></el-table-column>
              <el-table-column prop="mainStoneWeight" label="主石重"></el-table-column>
              <el-table-column prop="mainStoneColor" label="主石成色"></el-table-column>
              <el-table-column prop="viceStoneGrainNum" label="副石数量"></el-table-column>
              <el-table-column prop="viceStoneWeight" label="副石重"></el-table-column>
              <el-table-column prop="quantity" label="件数"></el-table-column>
              <el-table-column prop="salePrice" label="销售价格"></el-table-column>
              <el-table-column prop="marketCost" label="市场成本"></el-table-column>
              <el-table-column prop="expenses" label="费用"></el-table-column>
              <el-table-column prop="thumb" label="图片" width="width">
                <template slot-scope="scope">
                  <el-image style="width: 40px; height: 40px" :src="scope.row.thumb" :preview-src-list="[scope.row.thumb]"></el-image>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column v-if="confirm==='2'" type="selection" width="55"></el-table-column>
        <el-table-column v-if="confirm==='3'" type="selection" width="55"></el-table-column>
        <el-table-column type="index" prop="prop" label="#" width="width"></el-table-column>
        <el-table-column prop="orderId" label="订单编号" width="width"></el-table-column>
        <el-table-column prop="userName" label="真实姓名" width="width"></el-table-column>
        <el-table-column prop="consignee" label="收件人" width="width"></el-table-column>
        <el-table-column prop="mobile" label="收件人电话" width="width"></el-table-column>
        <el-table-column prop="orderUserName" label="下单户名" width="width"></el-table-column>
        <el-table-column prop="telephone" label="下单人电话" width="width"></el-table-column>
        <el-table-column prop="totalQuantity" label="订单数量" width="width"></el-table-column>
        <el-table-column prop="totalExpenses" label="订单金额" width="width"></el-table-column>
        <el-table-column prop="operateDate" label="下单时间" width="width">
          <template slot-scope="scope">
            {{scope.row.operateDate | dataFormat}}
          </template>
        </el-table-column>
        <el-table-column prop="deliAddress" label="收货地址" width="width"></el-table-column>
        <!-- <el-table-column prop="create_time" label="操作" width="width">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="showBox"></el-button>
            <el-button size="mini" type="success" icon="el-icon-location"></el-button>

          </template>
        </el-table-column> -->
      </el-table>
      <!-- 分页区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[5,10,15]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">

          </el-pagination>
        </el-col>
        <el-col :span="4" :offset="11">
          <div class="a">
            <el-button v-if="confirm==='2'" type="primary" @click="updateorderbutton" :disabled="extent">确认单据</el-button>
            <el-button v-if="confirm==='3'" type="warning" @click="updateorderbutton" :disabled="extent">反确认单据</el-button>
            <el-button type="success" class="export" @click="exportExcel">导出</el-button>
          </div>
        </el-col>
      </el-row>

    </el-card>

  </div>
</template>

<script>
//第三种方法导出表格
import table2excel from "js-table2excel";
export default {
  data() {
    return {
      //管理用户权限和操作是否能使用的对象
      extent: false,
      queryInfo: {
        starDate: "",
        endDate: "",
        status: "",
        //userName: "",
        pagenum: 1,
        pagesize: 5,
      },
      //确认按键是否显示
      confirm: 0,
      //修改单据对象
      updateInfo: {
        status: "",
        orderId: [],
      },
      //搜索双向绑定
      queryorder: "",
      //时间选择器接受用户选择包含的数组
      timegroup: [],
      total: 0,
      orderlist: [],
      addressVisible: false,
      addressForm: {
        address1: [],
        address2: "",
      },
      addressFormRules: {
        address1: [
          { required: true, message: "请选择省市区县", trigger: "blur" },
        ],
        address2: [
          { required: true, message: "请填写详细地址", trigger: "blur" },
        ],
      },
      //所有详细订单
      goodlist: [],
      //关于展开行的绑定数据
      expands: [],
      getRowKeys(row) {
        return row.orderId;
      },
    };
  },
  //页面刚加载的时候
  created() {
    var date1 = new Date();
    //今天时间
    var time1 =
      date1.getFullYear() +
      "-" +
      (date1.getMonth() + 1) +
      "-" +
      date1.getDate();
    //this.getOrderList();
    //如果checkFlag不等于2没有权限执行

    var date2 = new Date(date1);
    date2.setDate(date1.getDate() + -30);
    //num是正数表示之后的时间，num负数表示之前的时间，0表示今天
    //前30天的时间
    var time2 =
      date2.getFullYear() +
      "-" +
      (date2.getMonth() + 1) +
      "-" +
      date2.getDate();

    this.timegroup[0] = time2;
    this.timegroup[1] = time1;
    this.queryInfo.status = "2";
    this.queryInfo.starDate = time2;
    this.queryInfo.endDate = time1;
    console.log(this.queryInfo);
    this.getOrderList();

    let checkFlag = window.sessionStorage.getItem("checkFlag");
    if (checkFlag != 2) {
      this.extent = true;
    }
  },
  methods: {
    //获取订单列表
    async getOrderList() {
      const { data: res } = await this.$http.post(
        "order/get_order_list.php",
        this.queryInfo
      );
      //console.log(this.queryInfo);
      console.log(res.data);
      if (res.code === -1) {
        this.total = 0;
        this.orderlist = [];
        this.confirm = this.queryInfo.status;
        return this.$message.error("没有订单记录");
      } else if (res.code !== 0) {
        return this.$message.error("获取订单列表失败");
      }
      this.total = res.totalLines;
      this.orderlist = res.data;
      // console.log(this.orderlist);
      this.confirm = this.queryInfo.status;

      //console.log("3213" + this.confirm);
      //保存当前页的所有详细订单
      this.goodlist = [];
      res.data.forEach((el) => {
        console.log(el);
        el.goodsList.forEach((el2) => {
          el2.orderId = el.orderId;
          el2.userName = el.userName;
          el2.mobile = el.mobile;
          this.goodlist.push(el2);
        });
      });
      console.log(this.goodlist);
    },
    //修改单据的接口
    async updateorder() {
      const { data: res } = await this.$http.post(
        "order/confirm_oder.php",
        this.updateInfo
      );
      console.log(res);
      if (res.code !== 0) return this.$message.error("修改单据失败");
      this.$message.success("修改单据成功");
      this.getOrderList();
    },
    //监听pagesize改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.getOrderList();
    },
    //监听页码值改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      this.getOrderList();
    },
    //展示修改地址的对话框
    showBox() {
      this.addressVisible = true;
    },
    //下拉框选中的改变事件
    getValue() {
      //清空用户选择的数组
      this.$refs.multipleTable.clearSelection();
      this.updateInfo.orderId = [];
    },
    //时间选择器选中的事件
    gettimegroup() {
      console.log(this.timegroup[1]);
    },
    //点击搜索按钮
    getorderslist() {
      //console.log(this.timegroup);
      //没有选择日期或者类型
      if (this.queryInfo.status === "" || this.timegroup === null) {
        return this.$message.error("请选择日期或选择类型");
        //搜索框为空
      } else if (this.queryorder === "") {
        this.queryInfo.starDate = this.timegroup[0];
        this.queryInfo.endDate = this.timegroup[1];
        this.getOrderList();
        //console.log(this.queryInfo);
        //搜索框是数字
      } else if (!isNaN(this.queryorder)) {
        this.queryInfo.starDate = this.timegroup[0];
        this.queryInfo.endDate = this.timegroup[1];
        this.$set(this.queryInfo, "mobile");
        this.queryInfo.mobile = this.queryorder;
        this.getOrderList();
        this.$delete(this.queryInfo, "mobile");
        console.log("这是数字");
        //搜索框是文本
      } else {
        this.queryInfo.starDate = this.timegroup[0];
        this.queryInfo.endDate = this.timegroup[1];
        this.$set(this.queryInfo, "userName");
        this.queryInfo.userName = this.queryorder;
        this.getOrderList();
        console.log(this, this.queryInfo.userName);
        this.$delete(this.queryInfo, "userName");
        console.log("这是文本");
      }
    },
    //手动勾选选项
    selectorder(selection, row) {
      this.updateInfo.orderId = [];
      selection.forEach((el) => {
        this.updateInfo.orderId.push(el.orderId);
      });
      console.log(this.updateInfo.orderId);
    },
    //点击全选触发的事件
    selectorderall(selection) {
      this.updateInfo.orderId = [];
      selection.forEach((el) => {
        this.updateInfo.orderId.push(el.orderId);
      });
      //console.log(this.updateInfo.orderId);
    },
    //当表格展开行发生变化的时候只能展开一个行
    expandchange(row, expandedRows) {
      if (expandedRows.length) {
        this.expands = [];
        if (row) {
          this.expands.push(row.orderId);
        }
      } else {
        this.expands = [];
      }
    },
    //点击某一行表格也能展开
    clickTable(row, index, e) {
      //调用,table的方法,展开/折叠 行
      this.$refs.multipleTable.toggleRowExpansion(row);
    },
    //点击确认单据按钮或反确认按钮
    updateorderbutton() {
      console.log(this.updateInfo.orderId);
      if (this.updateInfo.orderId.length == 0) {
        return this.$message.error("没有勾选单据");
      } else if (this.queryInfo.status === "2") {
        this.updateInfo.status = 3;
      } else if (this.queryInfo.status === "3") {
        // console.log(this.queryInfo.status);
        this.updateInfo.status = 2;
      }
      this.updateorder();
      //初始化修改订单的数组
      this.updateInfo.orderId = [];
    },
    //删除订单
    handleDelete(index, row) {
      console.log(row.orderId);
    },

    //导出的第三种方法
    exportExcel() {
      this.$confirm("是否导出为excel", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const colum = [
            {
              title: "订单号",
              key: "orderId",
              type: "text",
            },
            {
              title: "真实姓名",
              key: "userName",
              type: "text",
            },
            {
              title: "收件人电话",
              key: "mobile",
              type: "text",
            },
            {
              title: "款号",
              key: "goodsId",
              type: "text",
            },
            {
              title: "商品名称",
              key: "goodsName",
              type: "text",
            },
            {
              title: "商品分类",
              key: "categoryName",
              type: "text",
            },
            {
              title: "条码",
              key: "styleSn",
              type: "text",
            },
            {
              title: "金重",
              key: "goldWeight",
              type: "text",
            },
            {
              title: "金料成色",
              key: "goldColor",
              type: "text",
            },
            {
              title: "金价",
              key: "goldPrice",
              type: "text",
            },
            {
              title: "主石类别",
              key: "mainStoneName",
              type: "text",
            },
            {
              title: "主石重",
              key: "mainStoneWeight",
              type: "text",
            },
            {
              title: "主石成色",
              key: "mainStoneColor",
              type: "text",
            },
            {
              title: "副石数量",
              key: "viceStoneGrainNum",
              type: "text",
            },
            {
              title: "副石重",
              key: "viceStoneWeight",
              type: "text",
            },
            {
              title: "件数",
              key: "quantity",
              type: "text",
            },
            {
              title: "销售价格",
              key: "salePrice",
              type: "text",
            },
            {
              title: "市场成本",
              key: "marketCost",
              type: "text",
            },
            {
              title: "费用",
              key: "expenses",
              type: "text",
            },
            {
              title: "图片",
              key: "thumb",
              type: "image",
              width: 100,
              height: 100,
            },
          ];
          table2excel(colum, this.goodlist, "订单列表");

          this.$message({
            type: "success",
            message: "导出成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消导出",
          });
        });
    },
  },
};
</script>

<style>
.el-select {
  width: 110px;
}
.el-input {
  margin-left: 5px;
}
.export {
  margin-top: 50px;
}
.a {
  margin-bottom: 10px;
}
</style>